<template>
  <div class="iInfo" element-loading-text="加载中" v-loading="loading">
    <div class="flex">
      <div class="lumpBox">
        <el-page-header content="添加生产单" @back="$router.go(-1)"></el-page-header>
        <el-table :data="tablelist">
          <el-table-column align="center" label="产品名" prop="id"></el-table-column>
          <el-table-column align="center" label="订单数量" prop="apply_dept_name"></el-table-column>
          <el-table-column align="center" label="产品库存" prop="warehouse_name"></el-table-column>
          <el-table-column align="center" label="正在生产数量" prop="product_name"></el-table-column>
          <el-table-column align="center" label="已生产数量" prop="audit_name"></el-table-column>
          <el-table-column align="center" label="状态" prop="warehouse_number"></el-table-column>
        </el-table>
        <div class="Lbox-content">

          <el-form :model="elForm" label-width="96px" ref="elForm" style="width: 600px;">
            <el-form-item :rules="FormRule.NotNull" class="is-required" label="单号：" prop="role_name">
              <el-input clearable maxlength="64" v-model.trim="elForm.role_name"></el-input>
            </el-form-item>
            <el-form-item :rules="FormRule.Power" class="is-required" label="权限设置：" prop="arr">
              <el-cascader-panel v-model="elForm.arr" @change="change" :options="options" :props="props" clearable></el-cascader-panel>
            </el-form-item>
            <el-form-item label="角色描述：">
              <el-input :rows="3" maxlength="64" placeholder="请输入角色描述" type="textarea" v-model.trim="elForm.note"></el-input>
            </el-form-item>
            <el-form-item class="el-btn-box">
              <el-button @click="confirm" class="el-btn" icon="el-icon-check" type="primary">确定111</el-button>
              <div class="el-btn"></div>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "add_up",
  data() {
    return {
      list: [],
      tablelist: [],
      data: "",
      loading: false,
      elForm: {
        role_name: "",
        note: "",
        arr: [],
        table: [],
      },
      props: {
        multiple: true,
        emitPath: false,
        value: "value",
        label: "label",
        children: "children",
      },
      options: [
        {
          value: "100",
          label: "项目统计",
        },
        {
          value: "200",
          label: "项目管理",
          children: [
            {
              value: "210",
              label: "项目详情",
              children: [
                {
                  value: "211",
                  label: "列表",
                },
                {
                  value: "212",
                  label: "添加",
                },
                {
                  value: "213",
                  label: "编辑",
                },
                {
                  value: "214",
                  label: "删除",
                },
              ],
            },
            {
              value: "220",
              label: "进度详情",
              children: [
                {
                  value: "221",
                  label: "列表",
                },
                {
                  value: "222",
                  label: "添加",
                },
                {
                  value: "223",
                  label: "编辑",
                },
                {
                  value: "224",
                  label: "删除",
                },
              ],
            },
          ],
        },
        {
          value: "300",
          label: "权限管理",
          children: [
            {
              value: "301",
              label: "列表",
            },
            {
              value: "302",
              label: "添加",
            },
            {
              value: "303",
              label: "编辑",
            },
            {
              value: "304",
              label: "删除",
            },
          ],
        },
      ],
    };
  },
  components: {},
  created() {
    this.$emit("pass", "/power");
    const id = this.$route.params.id;
    axios.get("/api/panghu").then((data) => {
      this.data = data.data.data;
      this.list = this.data.material.dataList;
      console.log(this.list, id);
      var dataform = this.list.filter(function (item) {
        return item.id == id;
      });
      this.tablelist = dataform;
      console.log(dataform);
    });
  },
  mounted() {},
  methods: {
    change(e) {
      console.log(e);
      this.isError();
    },
    confirm() {
      this.$refs["elForm"].validate((valid) => {
        if (valid) {
          console.log(this.elForm);
        } else {
          this.isError();
          return false;
        }
      });
    },
    isError() {
      this.$nextTick(() => {
        if (this.elForm.arr.length == 0) {
          $(".el-form-item__error")
            .siblings(".el-cascader-panel")
            .css("border-color", "#F56C6C");
        } else {
          $(".el-form-item__error")
            .siblings(".el-cascader-panel")
            .css("border-color", "#E4E7ED");
        }
      });
    },
  },
};
</script>
